<template>
  <div class="loginOriginClass">
    <div class="contentClass">
      <div class="titleClass">
        <Icon type="logo-apple" style="font-size:42px;"/>Admin 管理平台
      </div>
      <br>
      <div>
        <Input prefix="ios-contact-outline" placeholder="请输入用户名" v-model="username" class="unifiedClass"/>
      </div>
      <br>
      <div>
        <Input prefix="ios-lock-outline" placeholder="请输入密码" v-model="password" class="unifiedClass"/>
      </div>
      <br>
      <div style="height: 7px;">
        <Radio style="float: left;margin-left: 101px;" v-model="single">记住密码</Radio>
        <a style="float: right;margin-right: 101px;">注册账户</a>
      </div>
      <br>
      <div>
        <Button type="primary" class="unifiedClass" @on-enter="login" @click="login">登录</Button>
      </div>
    </div>
  </div>
</template>
<script>
import { login } from '@/api/login'
import Cookies from 'js-cookie'

export default {
  name: '',
  data() {
    return {
      single: true,
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      let params = {
        account: this.username,
        password: this.password
      }
      login(params).then(res => {
        if(res.data.state == 'ok'){
          this.$store.state.token = res.data.token
          this.$store.state.account = res.data.account
          Cookies.set('myToken', res.data.token, 1)
          this.$router.push('/')
        }else {
          this.$Notice.error({title:'提示', desc: res.data.msg})
        }
      })
    }
  },
  mounted() {
  }
}
</script>
<style>
.loginOriginClass {
  height: 100%;
  width: 100%;
  background-image: url('/login.png');
  background-attachment:fixed;
  background-repeat:no-repeat;
  background-size:cover;
  -moz-background-size:cover;
  -webkit-background-size:cover;
}
.loginOriginClass .titleClass {
  color: #000;
  font-size: 30px;
  font-weight: 600;
  padding-top: 7px;
}
.loginOriginClass .unifiedClass {
  height: 39px !important;
  width: 300px !important;
  line-height: 40px !important;
}
.loginOriginClass .unifiedClass .ivu-input{
  height: 40px;
}
.loginOriginClass .contentClass {
  border-radius: 10px;
  height: 400px;
  width: 500px;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #f2f2f2;
}
</style>
